<template>
    <div class="zs-card zs-layout-flex-col" :class="cardClass">
        <CardTitle :title="props.title" :isMore="props.isMore" :rightTip="props.rightTip" @onMore="goDetail"></CardTitle>
        <CardTab :tabs="props.tabs" :curTab="props.curTab" :tabRight="props.tabRight" @onChange="changeTab"></CardTab>
        <StackedHorizontalBar class="zs-layout-grow zs-overflow-auto" :echartId="props.echartId" :echartData="props.echartData" :colorLegend="props.colorLegend"></StackedHorizontalBar>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import CardTitle from '@/DbUiComponents/cardTitle'
import CardTab from '@/DbUiComponents/cardTab'
import StackedHorizontalBar from "@/components/EchartComponent/StackedHorizontalBar";

const props = defineProps({
    cardClass: {
        type: Array,
        required: false,
        default: () => { return [] }
    },
    title: {
        type: String,
        required: false,
        default: ''
    },
    isMore: {
        type: Boolean,
        required: false,
        default: true
    },
    rightTip: {
        type: Object,
        required: false,
        default: () => { return { text: '', className: '' } }
    },
    tabs: {
        type: Array,
        required: false,
        default: () => [{ label: '按日', value: '日' }, { label: '按月', value: '月' }, { label: '按年', value: '年' }]
    },
    curTab: {
        type: String,
        required: false,
        default: '日'
    },
    tabRight: {
        type: String,
        required: false,
        default: ''
    },
    echartId: {
        type: String,
        required: false,
        default: 'myEChartsBar'
    },
    echartData: {
        type: Object,
        required: false,
        default: () => { return { } }
    },
    colorLegend: {
        type: String,
        required: false,
        default: () => { return { } }
    },
    barText: {
        type: String,
        required: false,
        default: ''
    },
    unitText: {
        type: String,
        required: false,
        default: ''
    },
    updateText: {
        type: String,
        required: false,
        default: ''
    }
})
const emit = defineEmits(["onMore", "onChange"]);
const goDetail = () => {
    emit("onMore");
}

let isCanClick = ref(true)
const changeTab = (value) => {
    if (isCanClick.value) {
        emit("onChange", value);
        isCanClick.value = false
    }
    setTimeout(() => {
        isCanClick.value = true
    }, 1000);
}

</script>

<style scoped lang="scss"></style>
